import React,{useState} from "react";
import {Button} from 'antd';


const Child = ({getNum}) =>{
    const [count,setCount] = useState(0);
    const handleAdd = (val) =>{
        setCount(val);
        getNum(val)
    }
    return(
      <>
        <hr />
        <h3 style={{color:"tomato"}}>子组件</h3>
        <Button 
        onClick={handleAdd.bind(null,count +1)}
        type="primary"
        >点击使数字递增</Button>
      </>
      );
    

};


const Demo3 = () => {

  const [Num,SetNum] = useState(0);
  const getChildNum = (val) => {
    SetNum(val);
  };

  return (
    <>  
        <h3 style={{color:"skyblue"}}>父组件</h3>
        <p>子组件传来的数据{Num}</p>
        <Child getNum={getChildNum}></Child>
    </>
  );
};

export default Demo3;




/**
 *  在Vue中,子传父通过自定义事件，并且使用emit()去实现
 *  在React中，可以自定义去实现子传父
 *  首先，父组件需要向子组件传递一个函数，然后，子组件通过props获取函数并附上参数，
 *  最后，父组件通过函数拿到子组件传递的值。
 *  父组件跟子组件 "展示的数据" 要保持一致，情况复杂的多
 */
